<template>
	<div class="container" @click="handleClick">
		<!-- header -->
		<!-- <Header @soundsword="handelSound"></Header> -->
		<div class="header">
			<iframe src="/#/sounds" @message= "handelSound"></iframe>
		</div>
		<div class="nav">
			    <el-carousel trigger="click" height="3.125rem">
			      <el-carousel-item v-for="item in nav_img" :key="item.id">
					<div class="img"><img :src="item.src" /></div>
			        <!-- <h3 class="small">{{ item }}</h3> -->
			      </el-carousel-item>
			    </el-carousel>
				<div class="menu_list">
					<ul>
						<li @click.stop="handleClickA0"><i class="iconfont icon-video"></i>美食视频<i class="iconfont icon-xiangyou1"></i>
</li>
						<li @click.stop="handleClickA1" ><i class="iconfont icon-canju"></i>食材大全<i class="iconfont icon-xiangyou1"></i></li>
						<li @click.stop="handleClickA2"><i class="iconfont icon-yiliaoweisheng-
"></i>食疗食补<i class="iconfont icon-xiangyou1"></i></li>
						<li><i class="iconfont icon-caidan"></i>菜谱分类<i class="iconfont icon-xiangyou1"></i></li>
					</ul>
				</div>
				<div class="list_detail a0" ref="a0">
					<div class="item" @click.stop="handleVideo('/')">
						<p class="item_name">全部</p>
						<p class="item_desc">你想吃的都在这</p>
					</div>
					<div class="item" @click.stop="handleVideo('/measurement')">
						<p class="item_name">美食测评</p>
						<p class="item_desc">我就是美食判官</p>
					</div>
					<div class="item" @click.stop="handleVideo('/make')">
						<p class="item_name">美食制作</p>
						<p class="item_desc">会做饭的你很有魅力哦</p>
					</div>
					<div class="item" @click.stop="handleVideo('/rural')">
						<p class="item_name">田园美食</p>
						<p class="item_desc">品味自然之味</p>
					</div>
					<div class="item" @click.stop="handleVideo('/detective')">
						<p class="item_name">美食侦探</p>
						<p class="item_desc">一起发现新大陆</p>
					</div>
					<div class="item" @click.stop="handleVideo('/record')">
						<p class="item_name">美食记录</p>
						<p class="item_desc">看看又吃了啥</p>
					</div>
				</div>
				<div class="list_detail a1" ref="a1">
					<div class="item">
						<p class="item_name">谷类</p>
						<p class="item_desc">粮食作物</p>
					</div>
					<div class="item">
						<p class="item_name">薯类淀粉</p>
						<p class="item_desc">高分子碳水</p>
					</div>
					<div class="item">
						<p class="item_name">干豆类</p>
						<p class="item_desc">脱水豆类</p>
					</div>
					<div class="item">
						<p class="item_name">蔬菜类</p>
						<p class="item_desc">可烹饪植食</p>
					</div>
					<div class="item">
						<p class="item_name">菌藻类</p>
						<p class="item_desc">可烹饪菌食</p>
					</div>
					<div class="item">
						<p class="item_name">水果类</p>
						<p class="item_desc">高糖/水果实</p>
					</div>
					<div class="item">
						<p class="item_name">坚果种子</p>
						<p class="item_desc">干果类果实</p>
					</div>
					<div class="item">
						<p class="item_name">畜肉类</p>
						<p class="item_desc">猪牛羊兔</p>
					</div>
					<div class="item">
						<p class="item_name">禽肉类</p>
						<p class="item_desc">鸡鸭鸽鹅</p>
					</div>
					<div class="item">
						<p class="item_name">乳类</p>
						<p class="item_desc">乳制品</p>
					</div>
					<div class="item">
						<p class="item_name">蛋类</p>
						<p class="item_desc">鸡鸭鹅蛋</p>
					</div>
					<div class="item">
						<p class="item_name">海鲜</p>
						<p class="item_desc">鱼虾蟹贝</p>
					</div>
					<div class="item">
						<p class="item_name">幼儿食品</p>
						<p class="item_desc">哺乳断乳期食品</p>
					</div>
					<div class="item">
						<p class="item_name">小吃甜饼</p>
						<p class="item_desc">零食类</p>
					</div>
					<div class="item">
						<p class="item_name">速食食品</p>
						<p class="item_desc">快速食用</p>
					</div>
					<div class="item">
						<p class="item_name">软饮</p>
						<p class="item_desc">酒精含量&lt;0.5%</p>
					</div>
					<div class="item">
						<p class="item_name">酒类</p>
						<p class="item_desc">酒精类饮料</p>
					</div>
					<div class="item">
						<p class="item_name">糖、蜜饯</p>
						<p class="item_desc">高糖物质</p>
					</div>
					<div class="item">
						<p class="item_name">油脂类</p>
						<p class="item_desc">可使用油类</p>
					</div>
					<div class="item">
						<p class="item_name">调味品</p>
						<p class="item_desc">增色增香增味</p>
					</div>
				</div>
				<div class="list_detail a2" ref="a2">
					<div class="item">
						<p class="item_name">美容</p>
						<p class="item_desc">排毒养颜</p>
					</div>
					<div class="item">
						<p class="item_name">减肥</p>
						<p class="item_desc">瘦身瘦脸</p>
					</div>
					<div class="item">
						<p class="item_name">保健养生</p>
						<p class="item_desc">提高免疫力</p>
					</div>
					<div class="item">
						<p class="item_name">调养</p>
						<p class="item_desc">恢复精气</p>
					</div>
					<div class="item">
						<p class="item_name">肠胃消化</p>
						<p class="item_desc">通透顺畅</p>
					</div>
					<div class="item">
						<p class="item_name">孕产哺乳</p>
						<p class="item_desc">备孕下奶</p>
					</div>
					<div class="item">
						<p class="item_name">经期</p>
						<p class="item_desc">经期调养保护</p>
					</div>
					<div class="item">
						<p class="item_name">女性疾病</p>
						<p class="item_desc">保护女性健康</p>
					</div>
					<div class="item">
						<p class="item_name">呼吸道</p>
						<p class="item_desc">呼吸顺畅</p>
					</div>
					<div class="item">
						<p class="item_name">心脑血管</p>
						<p class="item_desc">缓解心血疾病</p>
					</div>
					<div class="item">
						<p class="item_name">肝胆脾胰</p>
						<p class="item_desc">保护肝胆脾胰</p>
					</div>
					<div class="item">
						<p class="item_name">男性</p>
						<p class="item_desc">扬起雄风</p>
					</div>
				</div>
		</div>
		<div class="floor">
			<div class="floor_item f1">
				<div class="item_head">
					<span class="item_icon"></span>
					<p><i class="iconfont icon-dianshizhibo"></i>视频推荐</p>
					<div><i class="iconfont icon-shuaxin"></i>换一换</div>
				</div>
				<div class="item_main">
					<div class="item" v-for="item in recommend_list" :key="item.aid" @click="handleVideo1(item.bvid)">
						<img referrerpolicy="no-referrer" :src="item.img_url" />
						<div><i class="iconfont icon-w_dianshi-"></i>{{ item.play }}</div>
						<p class="ellips">{{ item.title }}</p>
					</div>
				</div>
			</div>
			<div class="floor_item f2">
				<div class="item_head">
					<p><i class="iconfont icon-caipu"></i>每日精选</p>
					<div><i class="iconfont icon-shuaxin"></i>换一换</div>
				</div>
				<div class="item_main">
					<div class="item" v-for="(item,index) in shiling_list" :key="index" @click="handleVideo1(item.bvid)">
						<img referrerpolicy="no-referrer" :src="item.first_frame" />
						<p class="ellips">{{item.title}}</p>
					</div>
					<!-- <div class="item">
						<img src="../../public/img2.jpg" />
						<p>【虎皮鸡爪】不用油炸也能做出虎皮鸡爪，软糯入味，一呡脱骨~</p>
					</div>
					<div class="item">
						<img src="../../public/img2.jpg" />
						<p>【虎皮鸡爪】不用油炸也能做出虎皮鸡爪，软糯入味，一呡脱骨~</p>
					</div>
					<div class="item">
						<img src="../../public/img2.jpg" />
						<p>【虎皮鸡爪】不用油炸也能做出虎皮鸡爪，软糯入味，一呡脱骨~</p>
					</div>
					<div class="item">
						<img src="../../public/img2.jpg" />
						<p>【虎皮鸡爪】不用油炸也能做出虎皮鸡爪，软糯入味，一呡脱骨~</p>
					</div>
					<div class="item">
						<img src="../../public/img2.jpg" />
						<p>【虎皮鸡爪】不用油炸也能做出虎皮鸡爪，软糯入味，一呡脱骨~</p>
					</div>
					<div class="item">
						<img src="../../public/img2.jpg" />
						<p>【虎皮鸡爪】不用油炸也能做出虎皮鸡爪，软糯入味，一呡脱骨~</p>
					</div>
					<div class="item">
						<img src="../../public/img2.jpg" />
						<p>【虎皮鸡爪】不用油炸也能做出虎皮鸡爪，软糯入味，一呡脱骨~</p>
					</div>
					<div class="item">
						<img src="../../public/img2.jpg" />
						<p>【虎皮鸡爪】不用油炸也能做出虎皮鸡爪，软糯入味，一呡脱骨~</p>
					</div>
					<div class="item">
						<img src="../../public/img2.jpg" />
						<p>【虎皮鸡爪】不用油炸也能做出虎皮鸡爪，软糯入味，一呡脱骨~</p>
					</div> -->
				</div>
			</div>
			<div class="floor_item f3">
				<div class="item_head">
					<span class="item_icon"></span>
					<p> <i class="iconfont icon-wodecaipu"></i>热门推荐</p>
					<div><i class="iconfont icon-shuaxin"></i>换一换</div>
				</div>
				<div class="item_main">
					<div class="list_item" v-for="(item,index) in hot_list" :key="index" @click="handleVideo1(item.bvid)">
						<img referrerpolicy="no-referrer" :src="item.first_frame" />
						<p class="title ellips">{{item.title}}</p>
						<p class="desc ellips">{{item.title}}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
// 导入请求数据的 baseurl
import baseUrl from '@/utils/urlconfig'
// 按需导入 API 接口
import request from '@/utils/bili'
// import Header from '../components/Header.vue'
export default {
  data () {
	   return {
		   nav_img: [
			   { id: 1, src: './nav1.jpeg' },
			   { id: 2, src: './nav2.jpeg' },
			   { id: 3, src: './nav3.jpeg' },
			   { id: 4, src: './nav4.jpeg' }
		   ],
		   recommend_list: null,
		   shiling_list: null,
		   hot_list: null
	   }
  },
  // components: {
	 //  Header
  // },
  methods: {
	  getFromIframe(value) {
	        console.log(`我是iframe传过来的参数：${value}`);
	        console.log("我被iframe调用了！");
	        console.log(this.vueData);
	        console.log(`改变前是：你是否能够改变我；改变后是：${this.isChangeMe}`);
	      },
	  handelSound (name) {
		  console.log(name)
		  // if (name) {
			 //  var url = baseUrl + '/menu/menu_detail/?kw=' + name
			 //  this.$http.get(url).then(function (res) {
			 //  		  localStorage.removeItem('goodsList')
			 //  		  console.log(res.data)
			 //  		  localStorage.setItem('goodsList', JSON.stringify(res.data.first_title))
			 //  		  this.$router.push({
			 //  		    path: '/tuijian',
			 //  		  	name: 'tuijian',
			 //  		    params: { menuList: res.data.data.first_title }
			 //  		  })
			 //  }).catch(function (error) {
			 //  		  console.log(error)
			 //  })
		  // } else {
			 //  console.log('识别失败')
		  // }
	  },
	  handleVideo (path) {
		  const url = 'https://www.bilibili.com/v/food' + path
		  this.$router.push({
			  path: '/test3',
			  name: 'test3',
			  query: {
				  url: url
			  }
		  })
	  },
	  handleVideo1 (path) {
	  		  const url = 'https://www.bilibili.com/video/' + path
	  		  this.$router.push({
	  			  path: '/test3',
	  			  name: 'test3',
				  params: {
					  videoUrl: url
				  }
	  		  })
	  },
	  handleClick () {
		  for (var item in this.$refs) {
		  			  this.$refs[item].style.display = 'none'
		  }
	  },
	  handleClickA0 () {
		  for (var item in this.$refs) {
			  this.$refs[item].style.display = 'none'
		  }
		  this.$refs.a0.style.display = 'block'
	  },
	  handleClickA1 () {
	  		  for (var item in this.$refs) {
	  		  			  this.$refs[item].style.display = 'none'
	  		  }
	  		  this.$refs.a1.style.display = 'block'
	  },
	  handleClickA2 () {
	  		 for (var item in this.$refs) {
	  		 			  this.$refs[item].style.display = 'none'
	  		 }
	  		  this.$refs.a2.style.display = 'block'
	  },
	  async getData () {
		  var url = '/x/web-interface/ranking/region?rid=76&day=3'
		  const { data: res } = await request.get(url)
		  if (res.message === '0') {
			  var list1 = []
			  res.data.forEach(function (item) {
				  // console.log(item)
				  var num = Number(item.play)
				  if (num === 0) {
				  	num = num + ''
				  } else if (num > 1 && num < 10000) {
				  	num = num + ''
				  } else { num = (num / 10000).toFixed(1) + '万' }
				  list1.push({
					  aid: item.aid,
					  bvid: item.bvid,
					  title: item.title,
					  img_url: item.pic + '@350w_220h.webp',
					  play: num
				  })
			  })
			  this.recommend_list = list1.slice(4, 8)
		  }
	  },
	  async initShiling () {
	    var url = baseUrl + '/menu/shiling'
	    const { data: res } = await this.$http.get(url)
      console.log(res)
	    if (res.message === 'OK') {
	  	  // console.log(res.data)
		  this.shiling_list = res.data.first_title.slice(10, 20)
	    }
	  },
	  async initHotData () {
	    var url = baseUrl + '/menu/hot'
	    const { data: res } = await this.$http.get(url)
	  console.log(res)
	    if (res.message === 'OK') {
	  	  // console.log(res.data)
	  		  this.hot_list = res.data.first_title.slice(10, 24)
	    }
	  }
  },
  created () {
	  this.getData()
	  this.initShiling()
	  this.initHotData()
  },
}
</script>

<style scoped>
	/* 全局导入公共样式 */
	@import url("../assets/css/common.css");

	.container {
		width: 10rem;
		/* height: 5.625rem; */
		margin: 0 auto;
		color: #949292;
		/* background: #100c2a; */
		background-color: #F0F0F0
	}
	.container iframe{
		width: 100%;
		height: 0.75rem;		
	}
	.container .header{
		width: 100%;
		height: 0.75rem;
		position: sticky;
		top: 0;
		z-index: 20;
	}
	p,ul,li{
		margin: 0;
		padding: 0;
	}
	ul{
		list-style: none;
	}

	/* nav 导航制作------------start------------ */
	.nav{
		position: relative;
		overflow: hidden;
	}
	.nav,.nav .img {
		width: 10rem;
		height: 3.125rem;
	}
	.nav .img img{
		width: 100%;
		height: 4.375rem;
		transform: translateY(-0.9375rem);
	}
	/* 左侧导航页样式 */
	.nav .menu_list{
		position: absolute;
		top: 0;
		left: 0;
		width: 2.5rem;
		height: 3.125rem;
		background: rgba(2,0,0,0.62);
		z-index: 10;
		text-align: center;
	}
	.nav .menu_list ul{
		width: 2.03125rem;
		height: 100%;
		margin: auto;
	}
	.nav .menu_list ul li{
		height: 0.675rem;
		line-height: 0.675rem;
		/* background-color: pink; */
		font-size: 0.2375rem;
		color: #FFFFFF;
		border-top: 2px solid #797979;
		opacity: 0.7;
	}
	.nav .menu_list li:first-child{
		margin-top: 0.20625rem;
		border-top: none;
	}
	.nav .menu_list ul li i{
		font-size: 0.2625rem;
		margin-right: 0.15rem;
	}
	.nav .menu_list ul li i:last-child{
		margin-right: 0;
		margin-left: 0.35rem;
	}
	/* 点击弹出分类样式 */
	.nav .list_detail{
		font-family: "楷体";
		position: absolute;
		top: 0;
		left: 2.5rem;
		width: 4.6875rem;
		height: 3.125rem;
		background-color: #FFFFFF;
		z-index: 8;
		display: none;
	}
	.nav .list_detail .item{
		float: left;
	}
	/* .nav .a0{
		display: block;
	} */
	/*  美食视频样式 */
	.a0 .item{
		width: 1.6875rem;
		height: 0.75rem;
		margin-top: 0.25rem;
		margin-left: 0.4375rem;
		text-align: center;
	}
	.a0 .item .item_name{
		font-size: 0.3125rem;
		font-weight: bold;
		color: #252525;
	}
	.a0 .item .item_desc{
		margin-top: 0.0625rem;
		font-size: 0.1625rem;
		font-weight: bold;
		color: #686868;
	}
	/*  食材大全样式 */
	.a1 .item{
		width: 0.9375rem;
		height:0.4375rem;
		margin-top: 0.28125rem;
		text-align: center;
	}
	.a1 .item .item_name{
		font-size: 0.175rem;
		font-weight: bold;
		color: #252525;
	}
	.a1 .item .item_desc{
		font-size: 0.125rem;
		font-weight: bold;
		color: #686868;
	}
	/*  食补食疗样式 */
	.a2 .item{
		width: 1.25rem;
		height:0.4375rem;
		margin-top: 0.28125rem;
		margin-left: 0.1875rem;
		text-align: center;
	}
	.a2 .item .item_name{
		font-size: 0.175rem;
		font-weight: bold;
		color: #252525;
	}
	.a2 .item .item_desc{
		margin-top: 0.0625rem;
		font-size: 0.125rem;
		font-weight: bold;
		color: #686868;
	}
	/* nav 导航制作------------end------------ */
	/* floor楼层区制作------------start------------ */
	.floor{
		width: 100%;
		padding: 0 0.15625rem;
	}
	.floor_item{
		margin-top: 0.375rem;
		width: 100%;
	}
	.floor_item .item_head{
		width: 100%;
		height: 0.3875rem;
	}
	.floor_item .item_head span{
		float: left;
	}
	.floor_item .item_head p{
		float: left;
		font-family: "楷体";
		font-size: 0.275rem;
		color: #949292;
		text-shadow: 0px 3px 3px 0px rgba(104,101,101,0.41);
	}
	.floor_item .item_head p i{
		font-size: 0.375rem;
		font-weight: bold;
		color: rgb(243, 151, 86);
		margin-right: 0.0625rem;
	}
	.floor_item .item_head div{
		float: right;
		width: 0.875rem;
		height: 0.28125rem;
		font-size: 0.1625rem;
		color: rgba(139,139,139,0.68);
		background-color: #FFFFFF;
		border-radius: 0.0625rem;
		margin-top: 0.1rem;
		text-align: center;
		line-height: 0.28125rem;
	}
	.floor_item .item_head div i{
		font-size: 0.1625rem;
		margin-right: 0.05rem;
	}
	.item_main{
		margin-top: 0.0625rem;
		display: flex;
		justify-content: space-between;
	}
	.item_main .item{
		position: relative;
		width: 2.1875rem;
		height: 1.375rem;
		margin-top: 0.125rem;
		border-radius: 0.0625rem;
		overflow: hidden;
	}
	.item_main .item img{
		width: 100%;
		height: 100%;
	}
	.item_main .item div{
		position: absolute;
		top: 0.0625rem;
		left: 0.0625rem;
		font-size: 0.1625rem;
		font-weight: bold;
		color: rgba(255,255,255,.9)
	}
	.item_main .item div i{
		margin-right: 0.03125rem;
		font-size: 0.25rem;
	}
	.item_main .item p{
		width: 100%;
		position: absolute;
		font-size: 0.1625rem;
		font-weight: bold;
		line-height: 0.3875rem;
		bottom: 0;
		left: 0.0625rem;
		color: rgba(255,255,255,.9);
		/* 一行省略号显示 */
	}
	.ellips{
		text-overflow:ellipsis;
		overflow:hidden;
		white-space:nowrap;
	}
	.f2 .item_main .item p{
		font-size: 0.1375rem;
	}
	.f2 .item_main .item{
		width: 1.75rem;
		height: 1.75rem;
	}
	.f2 .item_main,.f3 .item_main {
		flex-wrap: wrap;
	}
	.f3 .list_item{
		width: 1.3125rem;
		height: 1.96875rem;
		background-color: #FFFFFF;
		text-align: center;
		margin-top: 0.125rem;
	}
	.f3 .list_item img{
		width: 1.25rem;
		height: 1.25rem;
	}
	.f3 .list_item .title{
		margin-top: 0.0625rem;
		font-size: 0.225rem;
		color: #565656;
	}
	.f3 .list_item .desc{
		margin-top: 0.0625rem;
		font-size: 0.1375rem;
		color: #A1A0A0;
	}
</style>
